<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button id="showBtn">显示</button>
    <button id="hiddenBtn">隐藏</button>
    <button id="btn">切换</button>

    <div></div>
    <script src="../../js/jquery-1.10.1.min.js"></script>
    <script>
        //show() 显示  与  hide()隐藏 是一组动画；
        // show():如果不加参数，没有动画效果；
        // show([speed],[callback])
        //       speed:如果传参数，表示的是动画的持续事件，可以是毫秒值，还可以是固定字符串    fast:200ms     normal:400ms     slow:600ms
        //        callback: 动画执行完成后执行

        //slideUp() 滑出 与 slideDown() 滑入     slideToggle 切换
        //slideDown()  如果不传参数，有一个默认值normal
        //show([speed],[callback]) 
        //      speed: 如果传参数，表示的是动画的持续事件，可以是毫秒值，还可以是固定字符串      fast:200ms     normal:400ms     slow:600ms  
        //      callback: 动画执行完成后执行  
        //slideToggle()   


        //fadeIn() 淡入   与  fadeOut 淡出   fadeToggle 切换

        $("#showBtn").click(function() {
            $("div").fadeToggle(1000)
        })

        // $("#hiddenBtn").click(function() {
        //     $("div").slideUp()
        // })
    </script>
</body>

</html>.